import React, { Component } from 'react';
import '../styles/AddAddress.scss'
import { NavBar, Form, Input, Button, Switch, Cascader, Toast } from 'antd-mobile'
import * as service from '../api/index'

class AddAddress extends Component {
    constructor(props) {
        super(props)
        this.state = {
            options: [
                {
                    label: '浙江',
                    value: '浙江',
                    children: [
                        {
                            label: '杭州',
                            value: '杭州',
                            children: [
                                {
                                    label: '西湖区',
                                    value: '西湖区',
                                },
                                {
                                    label: '上城区',
                                    value: '上城区',
                                },
                                {
                                    label: '余杭区',
                                    value: '余杭区',
                                    disabled: true,
                                },
                            ],
                        },
                        {
                            label: '温州',
                            value: '温州',
                            children: [
                                {
                                    label: '鹿城区',
                                    value: '鹿城区',
                                },
                                {
                                    label: '龙湾区',
                                    value: '龙湾区',
                                    disabled: true,
                                },
                                {
                                    label: '瓯海区',
                                    value: '瓯海区',
                                },
                            ],
                        },
                        {
                            label: '宁波',
                            value: '宁波',
                            children: [
                                {
                                    label: '海曙区',
                                    value: '海曙区',
                                },
                                {
                                    label: '江北区',
                                    value: '江北区',
                                },
                                {
                                    label: '镇海区',
                                    value: '镇海区',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: '安徽',
                    value: '安徽',
                    children: [
                        {
                            label: '合肥',
                            value: '合肥',
                            children: [
                                {
                                    label: '包河区',
                                    value: '包河区',
                                },
                                {
                                    label: '蜀山区',
                                    value: '蜀山区',
                                },
                                {
                                    label: '瑶海区',
                                    value: '瑶海区',
                                },
                            ],
                        },
                        {
                            label: '芜湖',
                            value: '芜湖',
                            children: [
                                {
                                    label: '镜湖区',
                                    value: '镜湖区',
                                },
                                {
                                    label: '弋江区',
                                    value: '弋江区',
                                },
                                {
                                    label: '湾沚区',
                                    value: '湾沚区',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: '江苏',
                    value: '江苏',
                    children: [
                        {
                            label: '南京',
                            value: '南京',
                            children: [
                                {
                                    label: '玄武区',
                                    value: '玄武区',
                                },
                                {
                                    label: '秦淮区',
                                    value: '秦淮区',
                                },
                                {
                                    label: '建邺区',
                                    value: '建邺区',
                                },
                            ],
                        },
                        {
                            label: '苏州',
                            value: '苏州',
                            children: [
                                {
                                    label: '虎丘区',
                                    value: '虎丘区',
                                },
                                {
                                    label: '吴中区',
                                    value: '吴中区',
                                },
                                {
                                    label: '相城区',
                                    value: '相城区',
                                },
                            ],
                        },
                    ],
                },
            ],
            visible: false,
            province: '',
            city: '',
            county: '',
            ischecked: null,
            disable: true,
            name: '',
            fromitem: '',
        }
    }
    Fromref = React.createRef()
    back() {
        this.props.history.goBack()
    }
    Selectcity(val) {//城市选择
        var [a, b, c] = val
        console.log(a, b, c);
        this.setState({ province: a, city: b, county: c }, () => {
            console.log(this.state.province, this.state.city, this.state.county);
        })
    }
    isDefault(e) {//是否为默认选中
        this.setState({ ischecked: e })
    }
    async submit() {//发送申请，新增地址
        var addinfo = this.Fromref.current.getFieldsValue()
        var userid = localStorage.getItem('userid')
        if (addinfo.name && addinfo.tel && addinfo.addressDetail && this.state.city && this.state.county && this.state.province != undefined) {
            var res = await service.address_add(
                {
                    userid, name: addinfo.name, tel: addinfo.tel,
                    province: this.state.province,
                    city: this.state.city,
                    county: this.state.county,
                    addressDetail: addinfo.addressDetail,
                    isDefault: addinfo.isDefault
                })
            if (res.data.code === '200') {
                Toast.show({
                    content: '添加成功',
                    icon: 'success',
                    duration: 1000,
                })
                this.props.history.goBack('/useraddress')
            }
        } else {
            Toast.show({
                content: '你还有信息没有填完呢！',
                duration: 1000,
            })
        }

    }
    phoneValidator = (_, value) => {//手机号校验
        if (value) {
            let reg = /^1[3-9]\d{9}$/;
            if (reg.test(value)) {
                this.setState({
                    loginname: value
                })
                return Promise.reject(this.setState({ disable: false }));
            }
            return Promise.reject(new Error('手机号无效'), this.setState({ disable: true }));
        } else {
            return Promise.reject(new Error('手机号不能为空'), this.setState({ disable: true }));
        }
    }
    nameValidator = (_, value) => {//姓名校验
        if (value) {
            return Promise.reject(this.setState({ disable: false }));
        } else {
            return Promise.reject(new Error('详细地址不能为空'), this.setState({ disable: true }));
        }
    }
    addressValidator = (_, value) => {//详细收货地址校验
        console.log(value)
        if (value) {
            return Promise.reject(this.setState({ disable: false }));
        } else {
            return Promise.reject(new Error('密码不能为空'), this.setState({ disable: true }));
        }
    }

    render() {
        return (
            <div className='addaddress' >
                <div className="top">
                    <NavBar onBack={() => { this.back() }}>添加地址</NavBar>
                </div>
                <div className="addaddress_main">
                    <Form
                        layout='horizontal'
                        ref={this.Fromref}
                        footer={
                            <Button block type='submit' disabled={this.state.disable} color='primary' size='large' onClick={() => { this.submit() }} >
                                保存
                            </Button>
                        }
                    >
                        {/* 姓名 */}
                        <Form.Item
                            name='name'
                            label='姓名'
                            rules={[{ validator: this.nameValidator }]}

                        >
                            <Input onChange={console.log} placeholder='姓名' />
                        </Form.Item>
                        {/*手机号  */}
                        <Form.Item
                            name='tel'
                            label='电话'
                            rules={[{ validator: this.phoneValidator }]}
                        >
                            <Input onChange={console.log} placeholder='电话' />
                        </Form.Item>
                        {/* 地区 */}
                        <Form.Item
                            name='province'
                            label='地区'
                            childElementPosition='right'
                            onClick={() => { this.setState({ visible: !this.state.visible }) }}
                        >
                            <Cascader
                                options={this.state.options}
                                visible={this.state.visible}
                                onClose={() => { this.setState({ visible: !this.state.visible }) }}
                                defaultValue={this.state.value}
                                onConfirm={() => { this.setState({ visible: !this.state.visible }) }}
                                onSelect={(val) => { this.Selectcity(val) }}
                            >
                                {items => {
                                    if (items.every(item => item === null)) {
                                        return '未选择'
                                    } else {
                                        return items.map(item => item?.label ?? '未选择').join('-')
                                    }
                                }}
                            </Cascader>
                        </Form.Item>
                        {/* 详细收货地址 */}
                        <Form.Item
                            name='addressDetail'
                            label='详情地址'
                            rules={[{ validator: this.addressValidator }]}
                        >
                            <Input onChange={console.log} placeholder='请输入地址' />
                        </Form.Item>
                        {/* 是否默认 */}
                        <Form.Item
                            name='isDefault'
                            label='设为默认地址'
                            childElementPosition='right'
                        >
                            <Switch onChange={(e) => { this.isDefault(e) }} />
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

export default AddAddress;